<template>
  <el-dialog
    title="数据处理"
    :close-on-click-modal="false"
    class="jsbos-dialog jsbos-dialog_center form-script-dialog"
    lock-scroll
    append-to-body
    v-bind="$attrs"
    width="800px"
    :modal-append-to-body="false"
    v-on="$listeners"
    @open="onOpen"
  >
    <h3>数字孪生格式处理模板</h3>
    <div class="btn" style="">
      <el-button @click="moban"> 图表格式FOR循环 </el-button>
      <el-button @click="moban2"> Key-Value 格式 </el-button>
    </div>

    <div class="form-script-dialog-body">
      <div class="right-main">
        <div class="codeEditor">
          <JSBOSCodeEditor v-model="text" :options="options" ref="CodeEditor" />
        </div>
        <div class="tips">
          <p>支持JavaScript的脚本，参考编写脚本API</p>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">{{
        $t("common.cancelButton")
      }}</el-button>
      <el-button type="primary" @click="onClose()">{{
        $t("common.confirmButton")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import JSBOSCodeEditor from "@/components/jsbos-editor/monaco";
export default {
  components: { JSBOSCodeEditor },
  props: ["value"],
  data() {
    return {
      text: "",
      options: {
        language: "javascript",
      },
    };
  },
  methods: {
    moban() {
      console.log("this.text", this.text);

      this.text = `(data) => {
    // 处理数据逻辑,图表数据处理
    for (var i = 0; i < data.length; i++){
        data[i].x = data[i].key
        data[i].y = data[i].key
        data[i].s = data[i].key
    }
    // 返回所需的数据
    return data
 }`;
      this.$nextTick(() => {
        this.$refs.CodeEditor.changeEditor({
          value: this.text,
          options: this.options,
        });
      });
    },
    moban2() {
      this.text = `(data) => {
    // 处理数据逻辑,图表数据处理
    for (var i = 0; i < data.length; i++){
        data[i].key= data[i].key
        data[i].value = data[i].key

    }
    // 返回所需的数据
    return data
 }`;
      this.$nextTick(() => {
        this.$refs.CodeEditor.changeEditor({
          value: this.text,
          options: this.options,
        });
      });
    },
    onOpen() {
      this.text = this.value;
      this.$nextTick(() => {
        this.$refs.CodeEditor.changeEditor({
          value: this.text,
          options: this.options,
        });
      });
    },
    onClose() {
      this.$emit("updateScript", this.text);
      this.closeDialog();
    },
    closeDialog() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="scss">
.btn {
  height: 80px;
  align-items: center;
  display: flex;
  // justify-content: space-between;
}
</style>
